<template>
  <t-tabs v-model="value" size="medium">
    <t-tab-panel value="1" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="基本信息">
      <t-form labelWidth="140px" :colon="true" >
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="基本信息">
              <t-row style="align-items: stretch;margin-top: 20px" :gutter="14">
                <t-col :span="6">
                  <t-form-item label="科技示范工程名称" name="projectName">
                    {{ data.projectName }}
                  </t-form-item>
                  </t-col>
                <t-col :span="6">
                  <t-form-item label="申报日期" name="declareDate">
                    {{ data.declareDate }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                    <t-form-item label="投入经费" name="adviceFunding">
                      {{ data.adviceFunding }}万元
                    </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="主管单位" name="manageDeptId">
                    {{data.manageDeptName}}
<!--                    {{ data.manageDeptId |filterByTree(deptMenuOptions)}}-->
                  </t-form-item>

                </t-col>

                <t-col :span="6">
                  <t-form-item label="项目开始日期" name="startDate">
                    {{ data.startDate }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="项目结束日期" name="endDate">
                    {{ data.endDate }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                                    <t-form-item label="关键词" name="keyWord">
                                      {{ data.keyWord }}
                                    </t-form-item>
                </t-col>
              </t-row>
            </t-card>
          </t-col>
          <!-- 项目负责人信息开始 -->
          <t-col :span="12" style="margin-top:15px">
            <t-card class="step-card" size="small" title="项目主要负责人">
              <t-row>
                <t-col :span="6">
                  <t-form-item label="姓名" name="projectLeader.name">
                    {{ data.projectLeader.name }}
                  </t-form-item>
                  <t-form-item label="性别" name="projectLeader.sex">
                    {{ data.projectLeader.sex | filterByDict(dict.type.sys_user_sex) }}
                  </t-form-item>
                  <t-form-item label="身份证号" name="projectLeader.idCard">
                    {{ data.projectLeader.idCard }}
                  </t-form-item>
                  <t-form-item label="出生年月" name="projectLeader.birthDate">
                    {{ data.projectLeader.birthDate }}
                  </t-form-item>
                  <t-form-item label="工作单位" name="projectLeader.departmentId">
                    {{ data.projectLeader.departmentName }}
<!--                    {{  data.projectLeader.departmentId |filterByTree(deptMenuOptions)}}-->
                  </t-form-item>
                  <t-form-item label="联系电话" name="projectLeader.phone">
                    {{ data.projectLeader.phone }}
                  </t-form-item>
                  <t-form-item label="通讯地址" name="projectLeader.address">
                    {{ data.projectLeader.address }}
                  </t-form-item>
                  <t-form-item label="电子信箱" name="projectLeader.email">
                    {{ data.projectLeader.email }}
                  </t-form-item>
                  <t-form-item label="邮编" name="projectLeader.postCode">
                    {{ data.projectLeader.postCode }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="毕业院校" name="projectLeader.school">
                    {{ data.projectLeader.school }}
                  </t-form-item>
                  <t-form-item label="学历" name="projectLeader.education">
                    {{ data.projectLeader.education | filterByDict(dict.type.education) }}
                  </t-form-item>
                  <t-form-item label="学位" name="projectLeader.degree">
                    {{ data.projectLeader.degree | filterByDict(dict.type.degree)}}
                  </t-form-item>
                  <t-form-item label="所学专业" name="projectLeader.majorName">
                    {{ data.projectLeader.majorName }}
                  </t-form-item>
                  <t-form-item label="现从事专业" name="projectLeader.majorNowName">
                    {{ data.projectLeader.majorNowName }}
                  </t-form-item>
                  <t-form-item label="职务" name="projectLeader.duty">
                    {{ data.projectLeader.duty }}
                  </t-form-item>
                  <t-form-item label="技术职称" name="projectLeader.profTitId">
                    {{ data.projectLeader.profTitId | filterByTree(profTitOptions) }}
                  </t-form-item>
                  <t-form-item label="职称" name="projectLeader.profTit">
                    {{ data.projectLeader.profTit  | filterByDict(dict.type.prof_tit) }}
                  </t-form-item>
                  <t-form-item label="承担的任务" name="projectLeader.task">
                    {{ data.projectLeader.task }}
                  </t-form-item>
                </t-col>
              </t-row>
            </t-card>
          </t-col>
          <!-- 项目联系人 -->
          <t-col :span="6" style="margin-top:15px">
            <t-card class="step-card"  style="" size="small" title="项目联系人">
              <t-form-item label="姓名" name="projectLinker.name">
                {{ data.projectLinker.name }}
              </t-form-item>
              <t-form-item label="联系电话" name="projectLinker.phone">
                {{ data.projectLinker.phone}}
              </t-form-item>
              <t-form-item label="通信地址" name="projectLinker.address">
                {{ data.projectLinker.address }}
              </t-form-item>
              <t-form-item label="电子信箱" name="projectLinker.email">
                {{ data.projectLinker.email }}
              </t-form-item>
              <t-form-item label="邮编" name="projectLinker.postCode">
                {{ data.projectLinker.postCode }}
              </t-form-item>
            </t-card>
          </t-col>
          <t-col :span="6" style="margin-top:15px">
            <t-card class="step-card"  style="" size="small" title="主管部门联系人">
              <t-form-item label="姓名" name="projectLinker.name">
                {{ data.manageDeptLinker.name }}
              </t-form-item>
              <t-form-item label="联系电话" name="projectLinker.phone">
                {{ data.manageDeptLinker.phone}}
              </t-form-item>
              <t-form-item label="通信地址" name="projectLinker.address">
                {{ data.manageDeptLinker.address }}
              </t-form-item>
              <t-form-item label="电子信箱" name="projectLinker.email">
                {{ data.manageDeptLinker.email }}
              </t-form-item>
              <t-form-item label="邮编" name="projectLinker.postCode">
                {{ data.manageDeptLinker.postCode }}
              </t-form-item>
            </t-card>
          </t-col>

        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel value="2" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="实施背景及必要性">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="实施背景及必要性">
<!--            <div  v-html="data.projectBackground.background"></div>-->
            <inner-html :content="data.projectBackground.background"></inner-html>

          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="3" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="依托工程（项目）概述">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="依托工程（项目）概述">
<!--            <div  v-html="data.projectOverview.projectOverview"></div>-->
            <inner-html :content="data.projectOverview.projectOverview"></inner-html>

          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="4" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="申报单位的前期工作和科研基础">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="申报单位的前期工作和科研基础">
<!--            <div  v-html="data.projectWorkBasis.workAndBasis"></div>-->
            <inner-html :content="data.projectWorkBasis.workAndBasis"></inner-html>

          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="5" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="科技示范工程的主要内容、示范规模、进度安排和组织实施方案">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="主要内容">
<!--            <div  v-html="data.projectMainContent.mainContent"></div>-->
            <inner-html :content="data.projectMainContent.mainContent"></inner-html>

          </t-card>
        </t-col>
      </t-row>
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="示范规模">
<!--            <div  v-html="data.projectMainContent.scale"></div>-->
            <inner-html :content="data.projectMainContent.scale"></inner-html>

          </t-card>
        </t-col>
      </t-row>
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="组织实施方案">
<!--            <div  v-html="data.projectMainContent.implementationPlan"></div>-->
            <inner-html :content="data.projectMainContent.implementationPlan"></inner-html>

          </t-card>
        </t-col>
      </t-row>
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="年度研究计划（包括起止年月、计划内容）">
            <project-research-plan ref="project-research-plan"
                                   v-model="data.projectMainContent.projectResearchPlan"
                                   :projectId="objId" :editOpen="false"
                                   phaseType="1"></project-research-plan>
          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="6" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="推广技术的主要内容与规模">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="推广技术的主要内容与规模">
<!--            <div  v-html="data.projectContentScale.contentAndScale"></div>-->
            <inner-html :content="data.projectContentScale.contentAndScale"></inner-html>

          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="7" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="主要目标和成果形式">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="主要目标">
<!--            <div  v-html="data.projectGoal.goal"></div>-->
            <inner-html :content="data.projectGoal.goal"></inner-html>

          </t-card>
        </t-col>
      </t-row>
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-card class="step-card" size="small" title="成果形式">
            <project-approach-expect-results phaseType="1" :projectId="objId"
                                             ref="project-approach-expect-results"
                                             v-model="data.projectGoal.projectExpectResults"
                                             :editOpen="false"></project-approach-expect-results>
          </t-card>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="8" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="单位信息">
      <project-unit v-model="data.projectCompanyList" :projectId="objId"  :editOpen="false" phaseType="1"></project-unit>
    </t-tab-panel>
    <t-tab-panel value="9" :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="附件信息">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-table v-if="isMyProject" row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{row, rowIndex}">
          {{ rowIndex+1 }}
        </template>
        <template #op="{row}">
          <file-upload v-if="['sfprojectSBS'].includes(row.moduleKey)" @success="uploadSuccess"  tips="限制pdf、图片" accept="application/pdf,image/*" v-model="row.fileIds" :moduleKey="row.moduleKey"
                       :fileList="row.fileLists"
                       :multiple="true">
            <t-button variant="outline">
              <t-icon name="cloud-upload" slot="icon"/>
              点击上传
            </t-button>
          </file-upload>
          <a v-else class="t-button-link" target="_blank" v-for="(item,index) in row.fileLists" :href="item.url" :key="index">
            {{item.name}}
          </a>
        </template>
        <template #c1="{row}">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
      </t-table>
      <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{row, rowIndex}">
          {{ rowIndex+1 }}
        </template>
        <template #c1="{row}">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
        <template  #op="{row}">
          <div v-for="(item,index) in row.fileLists" :key="index">
            <a class="t-button-link" target="_blank" :href="item.url" >
              {{item.name}}
            </a>
          </div>
        </template>
      </t-table>
        </t-col>
      </t-row>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import {getFiles} from "@/api/common";
import ProjectUnit from "./project-unit.vue";
import projectApproachExpectResults from "./project-approach-expectResults.vue";
import projectResearchPlan from "./project-research-plan.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";
import FileUpload from "@/components/FileUpload/index.vue"


export default {
  name: "project-detail",
  dicts: ['sys_user_sex', "prof_tit", "degree", "duty","education"],
  components:{
    ProjectUnit,
    projectApproachExpectResults,
    projectResearchPlan,
    InnerHtml,
    FileUpload
  },
  props: {
    objId: [String,Number],
    reviewOpen: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isMyProject:false,
      data:{
        projectGoal: {},
        projectCompanyList: [],
        projectContentScale: {},
        projectMainContent: {},
        projectWorkBasis: {},
        projectOverview: {},
        projectBackground: {},
        projectLinker:{},
        projectLeader:{},
        manageDeptLinker:{}
      },
      value:"1",
      profTitOptions: [],
      projectFileData: [
        {
          id: 1,
          c1: "相关附件(包括依托工程或项目的立项审批、核准或备案证明材料等)",
          c2: "是",
          moduleKey: "projectLXSPZMCL",
          fileIds: [],
          fileLists: [],
          require: true,
        },
        {
          id: 3,
          c1: "其他",
          c2: "否",
          moduleKey: "projectQT",
          fileIds: [],
          fileLists: [],
          require: false,
        },
        {
          id: 4,
          c1: "已盖章申报书",
          c2: "审批通过之后，走完盖章流程后上传。",
          fileIds: [],
          fileLists: [],
          moduleKey: "sfprojectSBS"
        }
      ],
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },

        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "附件列表",
          align: "left",
        },
      ],
    }
  },
  created() {
    this.getObj();
    this.getprofTitTreeSelect();
  },
  methods:{
    getObj(){
      // 如果审批状态
      if(this.reviewOpen){
        this.projectFileData.pop();
      }

      getFiles(this.objId).then((res) => {
        const files = {}
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        this.projectFileData.forEach((val,index)=>{
          this.projectFileData[index].fileLists = files[val.moduleKey] || [];
          this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
        })
      }).catch((e) => {
        this.$message.error(e.toString());
      });
      this.$api.kjsf.project.getAll(this.objId).then(response=>{
        this.isMyProject = this.$store.state.user.userId === response.data.createUserId;
        this.data = response.data;
      })
    },
    getprofTitTreeSelect() {
      this.$api.system.profTit.treeselect().then(response => {
        this.profTitOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    uploadSuccess(ids){
      this.$api.kjsf.project.update({
        id: this.objId,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel{
  padding: 10px;
}
.tab-panel{
  height: calc(65vh - 64px);
  overflow: scroll;
}
.tab-full-panel{
  height: calc(80vh - 64px);
  overflow: scroll;
}
.t-form__item{
  margin-bottom:6px
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
